// 在 navbar.js 中创建 Vue 应用
document.addEventListener("DOMContentLoaded", function () {
    const NavBar = {
        data() {
            return {
                currentPath: window.location.pathname,
                permissionLevel:0,
            };
        },
        template: `
            <div class="navbar">
                <div class="img-container">
                    <img class="img-logo" src="/img/logo.png">
                    <img class="img-title" src="/img/生生不息.png">
                </div>
                <div class="navbar-a-container">
                    <a :class="{ active: isActive('/index.html') }" href="/index.html">首页</a>
                    <a :class="{ active: isActive('/articles.html') }" href="/articles.html">文章资讯</a>
                    <a :class="{ active: isActive('/community.html') }" href="/community.html">内容社区</a>
                    <a :class="{ active: isActive('/record.html') }" href="/record.html" @click.prevent="handleNavigation('/record.html')">记录打卡</a>
                    <a :class="{ active: isActive('/points_mall.html') }" href="/points_mall.html">积分商场</a>
                    <a :class="{ active: isActive('/user_profile.html') }" href="/user_profile.html" @click.prevent="handleNavigation('/user_profile.html')">个人主页</a>
                    <a :class="{ active: isActive('/backstage_management.html') }" href="/backstage_management.html" @click.prevent="handleNavigation2('/backstage_management.html')">后台管理</a>
                </div>
                <div class="info-container">
                    <img class="info-avatar" src="/img/头像.jpg">
                    <el-text class="info-nickname">章初初</el-text>
                    <img class="info-logout" src="/img/退出.png" @click="logout">
                </div>
            </div>
        `,
        mounted(){
          this.getCurrentUser();
        },
        methods: {
            logout() {
                window.location.href = '/login.html'; // 跳转到登录页面
            },
            isActive(path) {
                return this.currentPath.endsWith(path);
            },
            getCurrentUser() {
                axios.get('http://localhost:8080/chat/currentUser')
                    .then(response => {
                        if (response.data.code === 200) {
                            this.currentUser = response.data.data.nickname;
                            this.currentUserAvatar = response.data.data.avatar;
                            this.permissionLevel = response.data.data.permissionLevel;
                        } else {
                            console.warn("未登录，跳转到登录页");
                            window.location.href = "/login.html"; // 重定向到登录页
                        }
                    })
                    .catch(error => console.error("获取当前用户失败:", error));
            },
            handleNavigation(path) {
                if (this.permissionLevel >= 2) {
                    window.location.href = path;
                } else {
                    ElMessage.warning('权限不足，无法访问该页面');
                }
            },
            handleNavigation2(path) {
                if (this.permissionLevel >= 3) {
                    window.location.href = path;
                } else {
                    ElMessage.warning('权限不足，无法访问该页面');
                }
            }
        }
    };

    // 使用 Vue 3 创建应用并挂载到指定的 DOM 元素
    Vue.createApp(NavBar).mount("#navbar");
});
